<template>
    <div class="goods-list">
        <div class="goods-list-card">
            <Row :gutter="20" style="margin-bottom: 10px">
                <!--<Col span="4">-->
                <!--<DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>-->
                <!--</Col>-->
                <!--<Col span="4">-->
                    <!--<Select clearable v-model="searchData.brandType" placeholder="按品牌分类">-->
                        <!--<Option v-for="(key,value) in brandType" :value="key.brandid">{{key.brandname}}</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <Col span="4">
                    <Input clearable v-model="searchData.goodsName" placeholder="商品名称" type="text"></Input>
                </Col>
                <Col span="2">
                    <Button style="float: right" :loading="search_loading" @click="searchGetList" type="primary">
                        <Icon type="ios-pulse-strong"></Icon> 筛 选
                    </Button>
                </Col>
                <!--<Col span="4">-->
                    <!--<Input clearable v-model="searchData.goodsSn" placeholder="商品编号" type="text"></Input>-->
                <!--</Col>-->
                <!--<Col span="4">-->
                    <!--<Input clearable v-model="searchData.shopName" placeholder="店铺名称" type="text"></Input>-->
                <!--</Col>-->
                <!--<Col span="4">-->
                    <!--<Select clearable v-model="searchData.saleCount" placeholder="商品销量">-->
                        <!--<Option :value="1">升序</Option>-->
                        <!--<Option :value="2">降序</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
            </Row>
            <!--<Row :gutter="10" style="padding: 10px 0;">-->
                <!--<Col span="3">-->
                    <!--<Select clearable v-model="searchData.isSale" placeholder="选择是否禁售">-->
                        <!--<Option :value="1">禁售</Option>-->
                        <!--<Option :value="-1">非禁售</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="3">-->
                    <!--<Select clearable v-model="searchData.isHot" placeholder="选择是否推荐">-->
                        <!--<Option :value="1">推荐</Option>-->
                        <!--<Option :value="-1">不推荐</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="3">-->
                    <!--<Select clearable v-model="searchData.isTimeUp" placeholder="创建时间排序">-->
                        <!--<Option :value="1">升序</Option>-->
                        <!--<Option :value="2">降序</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="3">-->
                    <!--<Select @on-change="getTypeTwoList" clearable v-model="searchData.goodsTypeIdOne" placeholder="商品一级分类">-->
                        <!--<Option v-for="(key,value) in goodsTypeOne" :value="key.catid">{{key.catname}}</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="3">-->
                    <!--<Select @on-change="getTypeThreeList" clearable v-model="searchData.goodsTypeIdTwo" placeholder="商品二级分类">-->
                        <!--<Option v-for="(key,value) in goodsTypeTwo" :value="key.catid">{{key.catname}}</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="3">-->
                    <!--<Select clearable v-model="searchData.goodsTypeIdThree" placeholder="商品三级分类">-->
                        <!--<Option v-for="(key,value) in goodsTypeThree" :value="key.catid">{{key.catname}}</Option>-->
                    <!--</Select>-->
                <!--</Col>-->
                <!--<Col span="6">-->
                    <!--<Button style="float: right" :loading="search_loading" @click="searchGetList" type="primary">-->
                        <!--<Icon type="ios-pulse-strong"></Icon> 筛 选-->
                    <!--</Button>-->
                <!--</Col>-->
            <!--</Row>-->
            <!--<div style="padding: 0px 0px 10px 0">-->
                <!--<ButtonGroup>-->
                    <!--&lt;!&ndash;<Button @click="changeTuijian(-1)" type="primary">设 置 推 荐</Button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<Button @click="changeTuijian(1)" type="info">取 消 推 荐</Button>&ndash;&gt;-->
                    <!--<Button @click="changeGoods(-1)" type="primary">设 置 禁 售</Button>-->
                    <!--<Button @click="changeGoods(1)" type="info">取 消 禁 售</Button>-->
                <!--</ButtonGroup>-->
            <!--</div>-->
            <i-table height="600" ref="selection" @on-selection-change="selectChange" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page :transfer="false" @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>是否确认删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="del">确认删除</Button>
            </div>
        </Modal>
    </div>

</template>
<script>
    export default {
        name:"goods-list",
        data(){
            return{
                columns:[
                    // {
                    //     type: 'selection',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '商品id',
                        key: 'id',
                        align:"center",
                    },
                    {
                        title: '商品图片',
                        key: 'image',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.image==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                                    on:{
                                        mouseover:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mousemove:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mouseout:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:"",
                                                x:"0px",
                                                y:"0px",
                                            })
                                        }
                                    }
                                },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:params.row.image
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },
                    {
                        title: '商品名称',
                        key: 'name',
                        align:"center",
                    },
                    {
                        title: '内容',
                        key: 'content',
                        align:"center",
                        render:(h,params)=>{
                            return h('span',{
                                domProps: {
                                    innerHTML: params.row.content
                                },
                                style:{
                                    display: '-webkit-box',
                                    overflow: 'hidden',
                                    height:'40px'
                                }
                            })
                        }
                    },
                    {
                        title: '商品原价',
                        key: 'old_price',
                        align:"center",
                        render:(h,params)=>{
                            return '¥ '+params.row.old_price
                        }
                    },
                    {
                        title: '会员价格',
                        key: 'price',
                        align:"center",
                        render:(h,params)=>{
                            return '¥ '+params.row.price
                        }
                    },
                    {
                        title: '状态',
                        key: 'is_sale',
                        align:"center",
                        render:(h,params)=>{
                            if (params.row.is_sale=='1'){
                                return "在售"
                            }
                            else {
                                return "未售"
                            }
                        }
                    },
                    // {
                    //     title: '商品名称',
                    //     key: 'goodsname',
                    //     align:"center",
                    //     width:300,
                    //     render:(h,params)=>{
                    //         return h("Tooltip",{
                    //             props:{
                    //                 placement:"top-start",
                    //             }
                    //         },[
                    //             h("span",{
                    //                 attrs:{
                    //                     "class":"notwrap"
                    //                 },
                    //                 style:{
                    //                     cursor:"pointer",
                    //                     width:"100%",
                    //                 }
                    //             },params.row.goodsname),
                    //             h("div",{
                    //                 slot:"content",
                    //                 style:{
                    //                     "white-space":"normal"
                    //                 }
                    //             },params.row.goodsname+"")
                    //         ])
                    //     }
                    // },
                    // {
                    //     title: '图标',
                    //     key: 'goodsimg',
                    //     align:"center",
                    //     width:100,
                    //     render:(h,params)=>{
                    //         if(params.row.goodsimg==""){
                    //             return "暂无"
                    //         }else{
                    //             return h("div",{
                    //                 style:{
                    //                     cursor: "pointer",
                    //                 },
                    //                 on:{
                    //                     mouseover:(e)=>{
                    //                         this.$store.commit("setImgData",{
                    //                             src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                             x:e.x+50+"px",
                    //                             y:e.y-60+"px",
                    //                         })
                    //                     },
                    //                     mousemove:(e)=>{
                    //                         this.$store.commit("setImgData",{
                    //                             src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                             x:e.x+50+"px",
                    //                             y:e.y-60+"px",
                    //                         })
                    //                     },
                    //                     mouseout:(e)=>{
                    //                         this.$store.commit("setImgData",{
                    //                             src:"",
                    //                             x:"0px",
                    //                             y:"0px",
                    //                         })
                    //                     }
                    //                 }
                    //             },[
                    //                 h("img",
                    //                     {
                    //                         attrs:{
                    //                             src:params.row.goodsimg
                    //                         },
                    //                         style:{
                    //                             width:"42px",
                    //                             height:"42px",
                    //                             borderRadius:"4px",
                    //                             margin:"0px auto",
                    //                             display:"block",
                    //                         },
                    //                     })
                    //             ])
                    //         }
                    //     }
                    // },

                    // {
                    //     title: '会员价格',
                    //     key: 'shopprice',
                    //     align:"center",
                    //     width:100,
                    //     render:(h,params)=>{
                    //         return '¥ '+params.row.shopprice
                    //     }
                    // },
                    // {
                    //     title: '普通价格',
                    //     key: 'marketprice',
                    //     align:"center",
                    //     width:100,
                    //     render:(h,params)=>{
                    //         return '¥ '+params.row.marketprice
                    //     }
                    // },
                    // {
                    //     title: '代金券',
                    //     key: 'coupon_num_max',
                    //     align:"center",
                    //     width:100,
                    // },
                    // {
                    //     title: '店铺',
                    //     key: 'shopname',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return h("Tooltip",{
                    //             props:{
                    //                 placement:"top-start",
                    //                 style:{
                    //                     width:"100%",
                    //                     overflow:"hidden"
                    //                 }
                    //             }
                    //         },[
                    //             h("span",{
                    //                 attrs:{
                    //                     "class":"notwrap",
                    //                 },
                    //                 style:{
                    //                     cursor:"pointer",
                    //                     width:"100%",
                    //                 }
                    //             },params.row.shopname),
                    //             h("div",{
                    //                 slot:"content",
                    //                 style:{
                    //                     "white-space":"normal"
                    //                 }
                    //             },params.row.shopname+"")
                    //         ])
                    //     }
                    // },
                    // {
                    //     title: '商品分类',
                    //     key: 'catNameLast',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return h("Tooltip",{
                    //             props:{
                    //                 placement:"top-start",
                    //                 style:{
                    //                     width:"100%",
                    //                     overflow:"hidden"
                    //                 }
                    //             }
                    //         },[
                    //             h("span",{
                    //                 attrs:{
                    //                     "class":"notwrap",
                    //                 },
                    //                 style:{
                    //                     cursor:"pointer",
                    //                     width:"100%",
                    //                 }
                    //             },params.row.catNameLast),
                    //             h("div",{
                    //                 slot:"content",
                    //                 style:{
                    //                     "white-space":"normal"
                    //                 }
                    //             },params.row.catNameLast+"")
                    //         ])
                    //     }
                    // },
                    // {
                    //     title: '是否推荐',
                    //     key: 'ishot',
                    //     align:"center",
                    //     width:100,
                    //     render:(h,params)=>{
                    //         if(params.row.ishot!=1){
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"checkmark-round",
                    //                         color:"green",
                    //                     }
                    //                 }
                    //             )
                    //         }else{
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"close-round",
                    //                         color:"red",
                    //                     }
                    //                 }
                    //             )
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '销量',
                    //     key: 'salecount',
                    //     align:"center",
                    //     width:80,
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width:250,
                        render:(h,params)=>{
                            return h("ButtonGroup",[
                                h("Button",{
                                    props:{
                                        type:"primary"
                                    },
                                    on:{
                                        click:()=>{
                                            this.$router.push({name:"goods-add-nocache",query:{id:params.row.id,isEdit:true,}})
                                        }
                                    }
                                },"修 改"),
                                // h("Button",{
                                //     props:{
                                //         type:"info"
                                //     }
                                // },"设置抢购"),
                                h("Button",{
                                    props:{
                                        type:"error",
                                        // disabled:params.row.is_sale==0?true:false
                                    },
                                    style:{
                                        // 'letterSpacing':params.row.is_sale==0?"0px":"6px"
                                    },
                                    on:{
                                        click:()=>{
                                            this.setJinShou(params.row.id,params.index)
                                        }
                                    }
                                },params.row.is_sale=='1'?"禁 售":"出 售"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ])
                        }
                    }
                ],
                data:[],
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    isSale:"",//售卖状态
                    isHot:"",//是否推荐
                    isTimeUp:"",//时间排序
                    brandType:"",//品牌分类
                    brandName:"",//品牌名称,
                    goodsName:"",//商品名称
                    // shopName:"",//店铺名称
                    // saleCount:"",//销量
                    // goodsSn:"",//编号
                    // goodsTypeIdOne:"",
                    // goodsTypeIdTwo:"",
                    // goodsTypeIdThree:"",
                },
                brandType:[],
                goodsTypeOne:[],//一级分类
                goodsTypeTwo:[],//二级分类
                goodsTypeThree:[],//三级分类
                search_loading:false,
                modal2:false,
                total:0,
                index:1,
                page_con:15,
                selectList:[],//选中的列表
            }
        },
        mounted(){
            this.getGoodsList()
            // this.getbrandType()
            // this.getTypeOneList()
        },
        methods:{
            //获取商品列表
            getGoodsList(){
                this.getJsonData("ProjectGoods/index",{
                    // num:this.page_con,
                    // page:this.index,
                    // begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    // last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    // goodsSn:this.searchData.goodsSn,
                    name:this.searchData.goodsName,
                    // brandId:this.searchData.brandType,
                    // shopName:this.searchData.shopName,
                    // saleCount:this.searchData.saleCount,
                    // isSale:this.searchData.isSale,
                    // goodsStatus:this.searchData.isHot,
                    // goodsCatId1:this.searchData.goodsTypeIdOne,
                    // goodsCatId2:this.searchData.goodsTypeIdTwo,
                    // goodsCatId3:this.searchData.goodsTypeIdThree,
                    // sort:this.searchData.isTimeUp,
                },true)
                    .then((res)=>{
                        this.search_loading=false
                        this.data=res.goods
                        this.total=parseInt(res.count)
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            remove(n){
                this.doIndex = n

                    this.modal2 = true

            },
            //获取商品一级分类
            // getTypeOneList(){
            //     this.getJsonData("Cat/getOneCat",{})
            //         .then((res) => {
            //             this.goodsTypeOne=res.data
            //         })
            // },
            //获取商品二级分类
            // getTypeTwoList(){
            //    if(this.searchData.goodsTypeIdOne!=""){
            //        this.getJsonData("Cat/getChildCat",{catId:this.searchData.goodsTypeIdOne})
            //            .then((res) => {
            //                this.goodsTypeTwo=res.data
            //            })
            //    }else{
            //        this.goodsTypeTwo=[]
            //        this.goodsTypeThree=[]
            //    }
            // },
            // getTypeThreeList(){
            //     if(this.searchData.goodsTypeIdTwo!=""){
            //         this.getJsonData("Cat/getChildCat",{catId:this.searchData.goodsTypeIdTwo})
            //             .then((res) => {
            //                 this.goodsTypeThree=res.data
            //             })
            //     }else{
            //         this.goodsTypeThree=[]
            //     }
            // },
            //获取品牌分类
            // getbrandType(){
            //     this.getJsonData("Pinpai/getAllForHua",{
            //
            //     })
            //         .then((res)=>{
            //             this.brandType=res.data
            //         })
            // },
            //筛选
            searchGetList(){
                this.search_loading=true
                this.getGoodsList()
                this.index=1
            },
            changePage(n){
                this.index=n
                this.getGoodsList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getGoodsList()
            },
            selectChange(selection){
                let list=[]
                for(var i=0;i<selection.length;i++){
                    list.splice(i,1,selection[i].goodsid)
                }
                this.selectList=list.join(",")
            },
            //禁售
            changeGoods(status){
                if(this.selectList!=""){
                    this.$Loading.start();
                    this.getJsonData("Goods/changeGoods",{goodsIds:this.selectList,type:status})
                        .then((res)=>{
                            this.$Message.success("操作成功")
                            this.getGoodsList()
                            this.selectList=""
                            this.$refs.selection.selectAll(false);
                        })
                }else{
                    this.$Message.warning("请勾选商品")
                }
            },
            //推荐
            changeTuijian(status){
                if(this.selectList!=""){
                    this.$Loading.start();
                    this.getJsonData("Goods/changeTuijian",{goodsIds:this.selectList,type:status})
                        .then((res)=>{
                            this.$Message.success("操作成功")
                            this.getGoodsList()
                            this.selectList=""
                            this.$refs.selection.selectAll(false);
                        })
                }else{
                    this.$Message.warning("请勾选商品")
                }
            },
            setJinShou(id,index){
                this.getJsonData("ProjectGoods/setIsSale",{id:id})
                    .then((res)=>{
                        this.$Message.success("操作成功")
                        /*this.data[index].issale="0"*/
                        this.getGoodsList()
                        this.selectList=""
                        this.$refs.selection.selectAll(false);
                    })
            },
            del(){

                this.getJsonData("ProjectGoods/delProjectGood",{id:this.data[this.doIndex].id},true)
                    .then((res)=>{
                        this.getGoodsList()

                        this.modal2 = false;
                        this.$Message.success('已删除');
                    }).catch((res)=>{

                    this.modal2 = false;
                })
            },
        }
    }
</script>
<style lang="less">
    @import "./goods-list";
</style>